<template>
  <div>
    <div v-if="Array.isArray(newLiveList) && newLiveList.length">
      <ul class="flex-wrap flex-multi-row">
        <li
          class="live-item"
          v-for="(item, index) in newLiveList"
          :key="index"
          @click="toLive(item)"
        >
          <!-- 观看，预约人数 -->
          <div class="study-number">
            {{ item.subscribe_count | dealNumber }}人{{
              +item.liveStatus === 3 || +item.liveStatus === 4
                ? '观看'
                : '已预约'
            }}
          </div>
          <!-- 状态标签 -->
          <div
            class="flex-center-wrap live-type-tag-ing"
            v-if="+item.liveStatus === 3"
          >
            <img
              style="width: 12px; height: 12px; margin-right: 4px"
              src="//image.zlketang.com/public/news/images/new_official/play/play_icon.gif"
              alt=""
            />
            <div>正在直播</div>
          </div>
          <div
            class="flex-center-wrap live-type-tag"
            v-if="+item.liveStatus === 1 || +item.liveStatus === 2"
          >
            <img
              src="//image.zlketang.com/public/news/images/new_official/live_course/live_type_tag.png"
              alt=""
              class="live-type-tag-ico"
            />
            <div>即将开始</div>
          </div>
          <div class="live-cover-box">
            <img
              v-lazy="parseResourceUrl(item.live_cover_url)"
              alt=""
              class="live-cover"
            />
          </div>
          <div class="live-name text-ess-2">
            <el-tooltip
              :content="item.video_name || item.video_name"
              effect="dark"
              placement="top-start"
            >
              <strong>{{ item.video_name }}</strong>
            </el-tooltip>
            <span>
              <img
                src="//image.zlketang.com/public/news/images/new_official/live_course/live_hot.png"
                alt=""
                class="hot-live-ico"
                v-if="+item.top_status === 1"
              />
            </span>
          </div>
          <div class="live-abstract text-ess-1">{{ item.profile }}</div>
          <div class="flex-center-wrap live-time">
            <div class="live-type" v-if="+item.is_free !== 1">专属课</div>
            <div class="live-type-free" v-else>公开课</div>
            <!-- 伪直播不显示开课时间 -->
            <div v-if="!item.isPseudoLive">
              开课时间：
              <template v-if="!isWaitStatus(item)">
                {{ item.beginTime }}
              </template>
              <template v-else>直播时间待更新</template>
            </div>
          </div>
          <div
            class="flex-center-wrap flex-justify-between"
            style="padding: 0 15px"
          >
            <div class="flex-center-wrap">
              <img
                :src="parseResourceUrl(item.teacher_img)"
                alt=""
                class="teacher-img"
              />
              <div class="teacher-name">{{ item.teacher_name }}</div>
            </div>
            <div
              class="to-live-btn flex-center"
              :class="{
                'to-live-btn-ing': +item.liveStatus === 3,
                'to-live-btn-over': +item.liveStatus === 4
              }"
              @click.stop="liveDetail(item)"
            >
              {{ btnMap[+item.liveStatus].text }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 直播列表空状态 -->
    <div v-else class="flex-center">
      <div class="live-blank-box">
        <img
          src="//image.zlketang.com/public/news/images/new_official/live_course/live_list_nothing.png"
          class="nothing-img"
          alt=""
        />
        <div class="nothing-text">呀！什么都没有哦～</div>
      </div>
    </div>
  </div>
</template>
<script>
import { subscribeLive } from '@/api/live_course'
export default {
  props: {
    liveList: {
      type: Array,
      default: []
    },
    mockid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      newLiveList: [],
      // 直播按钮状态映射表
      btnMap: {
        1: {
          text: '立即预约'
        },
        2: {
          text: '预约成功'
        },
        3: {
          text: '前往观看'
        },
        4: {
          text: '直播回放'
        }
      },
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  computed: {
    // 处理直播列表数据
  },
  methods: {
    computeNewLiveList() {
      let lives = this.liveList
      lives.forEach(item => {
        item.isPseudoLive = false
        let { barrage_info } = item
        item.beginTime = this.dateFormat('Y-m-d H:i', item.begin_time * 1000)
        // 获取伪直播
        if (
          barrage_info &&
          +barrage_info.barrage_type === 1 &&
          +barrage_info.send_status === 1 &&
          +item.current_time > +item.end_time
        ) {
          item.isPseudoLive = true
        }
        item.current_time = item.current_time || parseInt(Date.now() / 1000)
        item.liveStatus = this.getLiveType(item)
        item.subscribe = item.subscribe || item.status
      })
      this.newLiveList = lives
    },
    // 查看直播详情
    liveDetail(item) {
      // 预约直播
      // if (+item.liveStatus === 1) {
      //   this.toSubLive(item)
      //   return
      // }
      this.toLive(item)
    },
    // 预约直播
    toSubLive(item) {
      let params = {
        live_id: item.id
      }
      this.zlaBtn = {
        key_name: '预约直播',
        key_content: item.video_name
      }
      if (this.mockid) {
        this.zlaBtn = {
          key_name: `学习中心_${this.btnMap[item.liveStatus].text},万人模考_${
            this.btnMap[item.liveStatus].text
          }`,
          key_content: `${item.video_name}_${this.mockid}`
        }
      }
      subscribeLive(params)
        .then(res => {
          if (res.errcode !== 0) {
            this.$message.error('预约失败！')
            return
          }
          this.$message.success('直播预约成功')
          item.liveStatus = 2
          item.subscribe = 1
          this.$forceUpdate()
        })
        .catch(() => {
          this.$message.error('预约失败！')
        })
    },
    //跳转直播页
    toLive(item) {
      this.zlaBtn = {
        key_name: this.btnMap[+item.liveStatus].text,
        key_content: item.video_name
      }
      if (this.mockid) {
        this.zlaBtn = {
          key_name: `学习中心_${this.btnMap[item.liveStatus].text},万人模考_${
            this.btnMap[item.liveStatus].text
          }`,
          key_content: `${item.video_name}_${this.mockid}`
        }
      }
      this.goTo('/vcourse/live.html', {
        query: {
          live_id: item.id || item.live_id
        },
        target: '_blank',
        watch: true
      })
    },
    // 获取直播状态
    getLiveType(item) {
      let { begin_time, current_time, end_time, subscribe, isPseudoLive } = item
      // 直播结束
      if (+current_time > +end_time && !isPseudoLive) {
        return 4
      }
      // 直播中
      if (
        (+current_time <= +end_time && +current_time >= +begin_time) ||
        isPseudoLive
      ) {
        return 3
      }
      // 已预约
      if (+current_time < +begin_time && +subscribe === 1) {
        return 2
      }
      // 立即预约
      return 1
    },
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  mounted() {
    this.computeNewLiveList()
  }
}
</script>
<style scoped>
.live-item {
  font-size: 0;
  position: relative;
  margin: 0 20px 20px 0;
  width: 285px;
  height: 356px;
  background: #ffffff;
  border-radius: 12px;
  -webkit-box-shadow: 0 0 15px #f0f0f0;
  box-shadow: 0 0 15px #f0f0f0;
  cursor: pointer;
}
/* .live-item:hover .live-name {
  color: #3480ff;
} */
.live-item:nth-of-type(4n) {
  margin-right: 0;
}
.live-cover-box {
  width: 285px;
  height: 158px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
}
.live-cover {
  width: 285px;
  height: 158px;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
  transform: scale(1);
}
.live-cover:hover {
  transform: scale(1.1);
}
.live-cover[lazy='loading'],
.live-cover[lazy='error'] {
  width: 50px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  transition: none;
}
.live-name {
  margin: 15px 20px 10px;
  height: 52px;
  line-height: 26px;
  font-size: 16px;
  font-weight: bold;
  color: #383838;
}
.live-abstract {
  margin: 0 20px;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 17px;
}
.live-time {
  padding-bottom: 11px;
  margin: 10px 20px 15px;
  font-size: 12px;
  font-weight: 400;
  color: #bfbfbf;
  border-bottom: 1px solid #f0f0f0;
}
.live-type,
.live-type-free {
  margin-right: 10px;
  width: 46px;
  text-align: center;
  font-size: 10px;
  color: #ff7038;
  line-height: 20px;
  background: #fff1eb;
  border-radius: 4px;
}
.live-type-free {
  color: #ff8d38;
  background: #fff3eb;
}
.teacher-img {
  margin-right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.teacher-name {
  font-size: 12px;
  font-weight: 400;
  color: #8c8c8c;
}
.to-live-btn {
  width: 96px;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
  background: #fff;
  color: #ff8d38;
  border: 1px solid #ff8d38;
  border-radius: 16px;
  cursor: pointer;
}
.to-live-btn:hover {
  color: #ffffff;
  background: #ff8d38;
  border: none;
}
.to-live-btn-over {
  color: #666;
  border: 1px solid #666;
}
.to-live-btn-over:hover {
  color: #ffffff;
  background: #666;
  border: none;
}
.to-live-btn-ing {
  color: #ffffff;
  background: linear-gradient(90deg, #ff7038 0%, #ff5338 100%);
  border: none;
}
.to-live-btn-ing:hover {
  background: linear-gradient(90deg, #ff7038 0%, #ff5338 100%);
}
.study-number {
  position: absolute;
  top: 126px;
  left: 0;
  padding-left: 10px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  z-index: 9;
}
.live-type-tag,
.live-type-tag-ing {
  position: absolute;
  left: 0;
  top: 10px;
  padding: 0 9px;
  height: 23px;
  font-size: 12px;
  font-weight: 400;
  color: #ff7819;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0px 65px 65px 0px;
  z-index: 9;
}
.live-type-tag {
  color: #ffffff;
}
.live-type-tag-ico {
  width: 12px;
  height: 11px;
  margin-right: 4px;
}
.live-blank-box {
  padding: 30px 0;
}
.nothing-img {
  display: block;
  margin-bottom: 10px;
  width: 210px;
  height: auto;
}
.nothing-text {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
.hot-live-ico {
  position: relative;
  top: 1px;
  margin-left: 6px;
  width: 12px;
  height: 14px;
}
</style>
